import {Statistic} from 'antd';

import './index.less';
import React from "react";

export function TitleMarker(props: { content: React.ReactElement }) {
    return <div className="title-marker">{props.content}</div>;
}

export function TitleMarkerName(props: { name: string }) {
    return <div className="tip-marker-name">{props.name}</div>;
}

export function TitleMarkerItem(props: { title: string, count: number, unit: string, color: string }) {
    return (
        <div className="tip-marker-item" style={{color: props.color}}>
            {props.title}
            <span className="marker-item-count">
        <Statistic value={props.count}/>
      </span>
            <span className="marker-item-unit">{props.unit}</span>
        </div>
    );
}
